<template>
    <div class="box">
        <div class="praise">
            <h3>好评度 ：94%</h3>
            <div class="btn">
                <el-button type="primary">全部（19）</el-button>
                <el-button size="small">好评（18）</el-button>
                <el-button size="small">中评（0）</el-button>
                <el-button size="small">差评（1）</el-button>
            </div>

        </div>
        <dl class="comment" v-for="(item,idx) in 10">
            <dt><img src="https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83erZ37icy3FN1prLLx7v9xWwCTjz4wLIsw441c6hhcMbj49S69oXluPnL3RgVDpnDJaKNuvoweYracA/132"
                    alt=""></dt>
            <dd>
                <p class="name">{{commentData.name}}<span>举报</span></p>
                <p class="time">{{commentData.time}}</p>
                <p class="title">{{commentData.title}}</p>
            </dd>
        </dl>
    </div>
</template>
<script>
export default {
    data() {
        return {
            commentData: { img: 'https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ertu3Vz0acS8L46LCgGl0omx5FkscgGEW4siagbY5XZaiaIVrKQIRgicZ9XkPkVu4SWMogib3q8N20ibsA/132', name: '刘**龙', time: '11个月前|已上课3天', title: '头一次听课头大第二次听课迷芒第三次有点开窍第四次听课有点明了往后越来越好' }
        }
    }
}
</script>
<style lang="less" scoped>
.box {
    width: 790px;
    .praise {
        padding-bottom: 16px;
        border-bottom: 1px solid #e4ebf0;

        h3 {
            color: #0f1419;
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 18px;
        }

        /deep/.el-button {
            padding: 8px 8px;
        }

    }

    .comment {
        display: flex;
        padding: 15px;

        dt {
            width: 44px;
            height: 44px;
            border-radius: 22px;
            overflow: hidden;
            margin-right: 15px;
            margin-top: 5px;

            img {
                width: 100%;
            }
        }

        dd {
            flex: 1;
             border-bottom: 1px solid #e4ebf0;
            .name {
                font-size: 16px;
                line-height: 26px;
                color: #0f1419;
                span{
                    float: right;
                     font-size: 12px;
                color: #586470;
                }
                
            }

            .time {
                font-size: 12px;
                color: #586470;
                
            }
            .title{
                font-size: 16px;
                line-height: 26px;
                color: #0f1419;
            }
        }

    }

}
</style>